<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="choose">
        全选: <input type="checkbox" v-model="all"> <button @click="elseAction">反选 </button>
        <ul>
            <li v-for="choice in choices" :key="choice.id"><input type="checkbox"
                    v-model="choice.selected">{{choice.name}}</li>
        </ul>

    </div>

    <script src="../day01_homework/12306订单详情/js/vue.js"></script>
    <script>
        const choose = new Vue({
            el: '#choose',
            data: {
                choices: [
                    { id: 1, name: '前端', selected: false },
                    { id: 2, name: 'ios', selected: false },
                    { id: 3, name: 'android', selected: false },
                    { id: 4, name: 'flutter', selected: false },
                    { id: 5, name: 'uniapp', selected: false },
                    { id: 6, name: 'RN', selected: false },
                    { id: 7, name: 'JAVA', selected: false },
                    { id: 8, name: 'Python', selected: false }
                ]
            },
            computed: {
                all: {
                    get() {
                        return this.choices.every(item => item.selected)
                    },
                    set(value) {
                        this.choices.forEach(item => item.selected = value)
                    }
                }
            },
            methods: {
                elseAction() {
                    this.choices.forEach(item => item.selected = !item.selected)
                }
            }


        })


    </script>
</body>

</html>